<div class="account-container">
    <h1>记账记录</h1>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <div class="layui-input-group">
            <input type="text" id="accountSearch" placeholder="搜索描述内容" class="layui-input">
        </div>
    </div>
    
    <!-- 操作按钮组 -->
    <div class="btn-group">
        <button class="layui-btn layui-btn-primary" id="refreshBtn">
            <i class="layui-icon layui-icon-refresh"></i> 刷新
        </button>
        <button class="layui-btn" id="addAccountBtn">
            <i class="layui-icon layui-icon-add-circle"></i> 添加记账
        </button>
    </div>
    
    <!-- 表格容器，添加溢出防护 -->
    <div class="table-container">
        <table class="layui-table" id="accountTable">
            <thead>
                <tr>
                    <th style="width:200px;">记录ID</th>
                    <th style="width:200px;">用户</th>
                    <th style="width:150px;">金额</th>
                    <th style="width:150px;">分类</th>
                    <th>描述</th>
                    <th style="width:100px;">类型</th>
                    <th style="width:250px; text-align:center;">操作</th>
                </tr>
            </thead>
            <tbody id="accountTableBody">
                <!-- 记账数据将通过JavaScript动态生成 -->
            </tbody>
        </table>
    </div>
</div>